<template>
  <div class="container">
    <Header :getData="getData" />
    <div v-show="scene == 0">欢迎来到红浪漫</div>
    <div v-show="scene == 1">正在加载.....</div>
    <Footer :list="list" v-show="scene == 2" />
    <div v-show="scene == 3">404</div>
  </div>
</template>

<script>
//引入
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import axios from "axios";
export default {
  name: "",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      //父组件App响应式数据list，用来存储用户信息
      //起始数值是一个数组，为什么是数组，因为服务器返回的数据数组
      list: [],
      //场景：0 欢迎来到红浪漫  1：正在加载   2:用户信息    3：请求
      scene: 0,
    };
  },
  methods: {
    //获取关键字的方法----
    async getData(userName) {
      //父组件获取到数据【用户输入的用户名字】
      //axios.get||axios.post返回的是Promise对象，因此需要用then
      //发请求之前：正在加载
      this.scene = 1;
      //promise:三种状态，pending、成功、失败
      try {
        //成功干什么
        let result = await axios.get("https://api.github/search/users?q=" + userName);
        //存储服务器的数据
        if(result.status==200){
           this.list = result.data.items;
           //数据返回场景为2
           this.scene = 2;
        }
      } catch (error) {
        //失败干什么：404
        this.scene = 3;
      }
    },
  },
};
</script>

<style scoped>
</style>
